<template>
  <div class="outerBox">
    <div class="innerBox">
      <el-card class="box-card">
        <template v-slot:header>
          <div class="clearfix">
            <span>文章分类</span>
            <el-button
                style="float: right; padding: 3px 0"
                type="primary"
                @click="add"
                plain
            >添加分类</el-button
            >
          </div>
        </template>
        <el-table style="width: 100%" :data="ArticleList" border stripe v-loading="loading">
          <el-table-column label="序号" width="100" type="index"></el-table-column>
          <el-table-column label="分类名称" prop="cate_name"></el-table-column>
          <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button type="primary" plain @click="changeArticleInfo(scope.row)">修改</el-button>
              <el-button type="danger" plain @click="deleteArticleListItem(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <Dialog :title="title" :isShow="isShow" @closeDialog="closeDialog" :id="id" @getArticleList="getArticleList"/>
    </div>
  </div>
</template>

<script>
import {deleteArticleMsg, getArticleClassification} from "@/api";
import {ElMessage} from "element-plus";
import {onMounted, reactive, ref} from "vue";
import Dialog from './dialog'
export default {
  name: "IndexV",
  components:{ Dialog },
  setup(){
    // 状态
    let ArticleList = reactive([])
    let loading = ref(true)
    let title = ref('')
    let isShow = ref(false)
    let id = ref('')

    // 方法
    let add = () => {
      title.value = '添加分类'
      isShow.value = true
    }

    let changeArticleInfo = (data) => {
      id.value = data.id
      title.value = '修改分类'
      isShow.value = true
      console.log(id)
    }

    let closeDialog = () => {
      isShow.value = false
    }

    let deleteArticleListItem = async (row) => {
      const res = await deleteArticleMsg({ id: row.id })
      if (res.code === 0) {
        await getArticleList()
        ElMessage.success(res.message)
      } else {
        ElMessage.error(res.message)
      }
    }

    let getArticleList = async() => {
      loading.value = true
      ArticleList.length = 0
      const res = await getArticleClassification()
      ArticleList.push(...res.data)
      loading.value = false
    }

    onMounted(() => {
      getArticleList()
    })

    return{
      ArticleList,
      loading,
      title,
      isShow,
      id,
      add,
      deleteArticleListItem,
      getArticleList,
      closeDialog,
      changeArticleInfo
    }
  }
}
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.outerBox{
  width: 100%;
  height: 500px;
  box-sizing: border-box;
}
.innerBox{
  width: 98%;
  height: 100%;
  margin: 20px auto;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.el-button{
  width: 100px;
  height: 30px;
}
</style>
